<template>
	<view class="kai_guan_category_box" :style="{height: windowHeight + 'px'}">
		<view class="open_hardwareLength" v-if="openHardWareList && openHardWareList.length" @click="goToOpenHardWareList()">
		  <text class="num mainColor fs_36">{{ openHardWareList.length }}</text>	
			<text class="vertical_text mn mainColor fs_36">\n ᠲᠥᠬᠦᠭᠡᠷᠦᠮᠵᠢ \n ᠠᠵᠢᠯᠯᠠᠵᠤ \n ᠪᠠᠢᠨ᠎ᠠ᠃</text>
		</view>
		
		<view class="oprate_box">
			<view class="oprate_item" v-for="(item, index) in kaiGuanCategoryList" :key="index">
				<text class="title vertical_text mn fs_36_i color_fff">{{ formatKaiGuanMonName(item.value) }}</text>
				
				<i class="iconfont icon-siweiqi color_fff" v-if="item.value == 'siwei'" @click="goToKaiGuanList('siwei')"></i>
				<i class="iconfont icon-yinshui color_fff" v-else-if="item.value == 'shui'" @click="goToKaiGuanList('shui')"></i>
				<i class="iconfont icon-icon_fangyixiaosha color_fff" v-else-if="item.value == 'xiaosha'" @click="goToKaiGuanList('xiaosha')"></i>
				<i class="iconfont icon-qingli color_fff" v-else-if="item.value == 'qingli'" @click="goToKaiGuanList('qingli')"></i>
			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				openHardWareList: [],
				kaiGuanCategoryList: [],
			}
		},
		onLoad() {
			// 获取设备高度
			this.getSystemHeight()
		},
		onShow() {
			this.getOpenHardWareList()
			this.getKaiGuanCategory()
		},
		mounted() {
			this.getOpenHardWareList()
			this.getKaiGuanCategory()
		},
		methods: {
			// 获取开关分类
			getKaiGuanCategory() {
				NET.request(API.getKaiGuanCategory, 'GET')
				.then(res => {
					// console.log('获取开关分类 : ', res)
					if (res.code == 200) {						
						for (let i in res.data) {
							if (res.data[i].dict.type == 'ms_hardware_on_off') {
								this.kaiGuanCategoryList = res.data[i].dictDataList
							}
							
							// return false
						}
					}
				})
				.catch(err => {
					console.error('获取开关分类失败 : ', err)
				})
			},
			
			// 获取正在运行的设备
			getOpenHardWareList() {
				NET.request(API.getOpenHardWareList, 'GET')
				.then(res => {
					// console.log('获取 open 开关: ', res)
					if (res.code == 200) {						
						this.openHardWareList = res.data
					}
				})
				.catch(err => {
					console.error('获取 open 开关失败 : ', err)
				})
			},
			
			// 跳转到正在运行的开关列表页
			goToOpenHardWareList() {
				uni.navigateTo({
					url: '/subcontract/kai-guan/open-kai-guan-list'
				})
			},
			
			// 跳转到开关列表页
			goToKaiGuanList(val) {
				uni.navigateTo({
					url: `/subcontract/kai-guan/kai-guan-list?type=${val}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.kai_guan_category_box {
		width: 100%;
		
		.open_hardwareLength {
			width: 40%;
			height: 120rpx;
			line-height: 60rpx;
			margin: 0 auto;
			padding-top: 10rpx;
			box-sizing: border-box;
			white-space: nowrap;
			text-align: center;

			.num {
				position: relative;
				top: -40rpx;
				left: 30rpx;
			}
		}
		
		.oprate_box {
			width: 100%;
			height: 70%;
			background-color: #fff;
			padding: 20rpx;
			
			.oprate_item {
				width: 46%;
				height: 35%;
				float: left;
				background-color: #1c9aa0;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
				position: relative;
				
				.title {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
				}
				
				.iconfont {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 130rpx;
				}
			}
		}
	}
</style>